<!--
  退款组件: 处理退款的组件
-->
<script>
export default {
  name: "OutMoney",
  data() {
    return {
      orderInputValue: '',
      orderSelectValue: '-1',
      orderData: [],
    }
  },
  created() {
    this.findAllOrder()
  },
  methods: {
    async findAllOrder() {
      try {
        const res = await this.$http.get('/order/findAllOrder')
        this.orderData = [];
        console.info(res)

        const filterOrders = (status) => res.data.filter(item => item.orderStatus === status);

        switch (this.orderSelectValue) {
          case '-1': // 全部
            this.orderData = res.data;
            break;
          case '0': // 待支付
            this.orderData = filterOrders(0);
            break;
          case '1': // 已支付
            this.orderData = filterOrders(1);
            break;
          case '2': // 已超时 失效
            this.orderData = filterOrders(2);
            break;
          default:
            console.warn('未知的 orderSelectValue:', this.orderSelectValue);
        }

      } catch (e) {
        console.error("findAllOrderError: " + e)
      }

    },
    async orderInput() {
      await this.findAllOrder();
      console.log("值")
      console.info(this.orderInputValue)
      const findOrderByOrderId = (orderId) => this.orderData.filter(item => item.orderId === orderId);
      if (this.orderInputValue !== '') this.orderData = findOrderByOrderId(this.orderInputValue);
      console.info(this.orderData)
    },
    faHuo(row) {
      //更改订单状态 为 3 ，跟据订单id
      this.$http.post('/order/updateStatusByOrderId', {orderId: row.orderId, status: 3})
          .then(res => {
            if (res.data.msg===1){
              this.findAllOrder();
              this.$message.success("发货成功")
            }
            console.info(res)
          })
    }
  }
}
</script>

<template>
<div>
  <div>
    <el-row>
      <el-col :span="21">
        订单：
        <el-input v-model="orderInputValue" @change="orderInput()" placeholder="输入你要查询的订单编号"
                  style="width: 250px;display: inline-block"/>
        <el-button @click="orderInputValue='';orderInput()" style="display: inline-block">清空</el-button>
      </el-col>
      <el-col :span="3">
        <el-select v-model="orderSelectValue" style="width: 150px;" @change="findAllOrder()">
          <el-option label="全部" value="-1"/>
          <el-option label="已付款" value="1"/>
          <el-option label="未付款" value="0"/>
          <el-option label="已失效" value="2"/>
        </el-select>
      </el-col>
    </el-row>


    <el-table :data="orderData" style="width: 100%">
      <el-table-column prop="orderId" label="订单编号" width="120"></el-table-column>
      <el-table-column prop="userId" label="用户编号" width="100"></el-table-column>
      <el-table-column prop="userPhone" label="用户手机号" width="100"></el-table-column>
      <el-table-column prop="createTime" label="日期" width="180"></el-table-column>
      <el-table-column prop="allMoney" label="订单金额" width="100"></el-table-column>
      <el-table-column prop="userAddress" label="地址" width="230"></el-table-column>
      <el-table-column label="支付状态">
        <template #default="scope">
          <span v-if="scope.row.orderStatus===1">已支付</span>
          <span v-else-if="scope.row.orderStatus===2">已失效</span>
          <span v-else-if="scope.row.orderStatus===3">已发货</span>
          <span v-else-if="scope.row.orderStatus===4">已收货</span>
          <span v-else>未支付</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="scope.row.orderStatus===1" @click="faHuo(scope.row)">发货</el-button>
          <span v-else-if="scope.row.orderStatus===2">无</span>
          <span v-else-if="scope.row.orderStatus===3">已发货</span>
          <span v-else-if="scope.row.orderStatus===4">已收货</span>
          <span v-else>未支付</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<style scoped>

</style>